<template>
  <a-modal
    :title="title"
    width="80%"
    :visible="visible"
    :footer="null"
    @cancel="handleCancel">
    <div>
      <a-button class="editable-add-btn" @click="handleAdd">
        添加
      </a-button>
      <a-table
        class="components-table-demo-nested"
        ref="table" 
        :columns="columns" 
        :row-key="record => record.id" 
        :data-source="data" 
        :pagination="pagination" 
        :loading="loading" 
        @change="handleTableChange">
        <span slot="operation" slot-scope="text, record">
          <template>
            <a-popconfirm
              title="是否删除该条记录?"
              @confirm="confirm(record)"
              @cancel="cancel"
              okText="是"
              cancelText="否"
            >
              <a href="#">删除</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a @click="handleEdit(record)">编辑</a>
          </template>
        </span>
      </a-table>
      <dictionary-setting-detail-add ref="modal" @ok="handleOk"></dictionary-setting-detail-add>
        
    </div>
  </a-modal>
</template>
<script>
  
  import {getUrl, postAxiosUrl} from '@/api/manage'
  import DictionarySettingDetailAdd from './DictionarySettingDetailAdd'
  
export default {
  components: {
    DictionarySettingDetailAdd
  },
  data() {
    return {
      visible : false,
      loading : false,
      parentId : '',
      title : '',
      data: [],
       pagination: {size:'small'},
      columns: [
        {
          title: '编码',
          dataIndex: 'code'
        },
        {
          title: '名称',
          dataIndex: 'name',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
    }
  },
  created() {
    
  },
  methods: {
    handleCancel () {
        this.visible = false
    },
    handleOk(){
        this.fetch()
    },
    handleEdit (record) {
        this.$refs.modal.edit(record)
         this.parentId = record.id
    },
    cancel(e) { 
    },
    show(obj){
        this.visible = true
        this.title = '数据字典-' +obj.name
        this.parentId = obj.id
        this.fetch()
    },
    onDelete(key) {
      const dataSource = [...this.dataSource]
      this.dataSource = dataSource.filter(item => item.key !== key)
    },
    handleAdd() {
      this.$refs.modal.add(this.parentId)
    },
    confirm (record) {
      const me = this
            postAxiosUrl('cutFirstSetting/del', {id : record.id})
              .then(res => {
                me.fetch()
              })
    },
    handleTableChange(pagination, filters, sorter) {
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current
      })
    },
    fetch(params = {}) {
      this.loading = true
      var _this = this
      params.parentId = this.parentId
      return getUrl('cutDictionaryDetail/getAllByPage', params)
        .then(data => {
        
          const pagination = { ...this.pagination
          }
          // Read total count from server
          pagination.total = data.result.totalCount
          pagination.showTotal = total => `共 ${total} 条`
          pagination.showQuickJumper = true
          this.loading = false
          this.data = data.result.data
          this.pagination = pagination
        
    
        })
    },
  },
}
</script>
<style>
.editable-cell {
  position: relative;
}

.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
  padding-right: 24px;
}

.editable-cell-text-wrapper {
  padding: 5px 24px 5px 5px;
}

.editable-cell-icon,
.editable-cell-icon-check {
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}

.editable-cell-icon {
  line-height: 18px;
  display: none;
}

.editable-cell-icon-check {
  line-height: 28px;
}

.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
  color: #108ee9;
}

.editable-add-btn {
  margin-bottom: 8px;
}
</style>